<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
    var btn = document.querySelector('button');
    var btns = document.querySelectorAll('button');

    // 改变函数内this指向 js提供了三种方法 call() apply() bind()

    // 3.bind() 绑定, 捆绑的意思
    var o = {
        name: 'tom'
    }

    function func(x, y) {
        console.log(this)
        console.log(`x:${x}, y:${y}`);
    }

    // 1.不会调用原来的函数, 可以改变原来函数内部的 this 指向
    // 2.返回的是原函数改变 this 之后产生的新函数
    // 3.如果有的函数我们不需要立即调用, 但是又想改变这个函数内部的this指向此时用bind
    // 4.我们有一个按钮, 当我们点击了之后, 就禁用这个按钮, 3S后开启这个按钮


    // btn.addEventListener('click', function () {
    //     this.disabled = true;   // 这个 this 指向的是 btn 这个按钮
    //
    //     setTimeout(function () {
    //         // this.disabled = false;   // 没加bind之前, 定时器函数里面的this 指向的是window
    //         this.disabled = false;
    //     }.bind(this), 3000);    // 加了bind之后, 这个this指向的是 btn 这个对象
    // })

    var resFunc = func.bind(o, 1, 2)
    resFunc();


    // 出现问题的原因: for循环中使用var, 换成let即可实现
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            this.disabled = true;
            setTimeout(function () {
                // btns[i].disabled = false;
                this.disabled = false;
            }.bind(this), 3000)
        })

    }
</script>
</body>
</html>
